<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    // 页面加载完成事件
    window.onload = function () {
        let userNameObj = document.querySelector("#userName"); // id 选择器
        console.log(userNameObj);

        let radioObjs = document.querySelectorAll(".radio");    // 类选择器
        for(let radioObj of radioObjs){
            console.log(radioObj);
        }
        // 标签选择器
        let optionObjs = document.querySelector("option");  // 标签选择器
        for(let optionObj of optionObjs){
            console.log(optionObj);
        }
        // 属性选择器
        let checkBoxObjs = document.querySelectorAll("input[type='checkbox']");

        for(let checkBoxObj of checkBoxObjs){
            console.log(checkBoxObj);
        }

        console.log("--------");

        let object = document.querySelectorAll(".radio, option");   // 并列选择器
        for(let obj of object){
            console.log(obj);
        }

    }
</script>
<form action="#" method="get">
    姓名: <input type="text" name="userName" id="userName" value="xiaoxiao"/>
    密码: <input type="password" name="userPass"><br/>
    生日: <input type="date" name="userBirth"><br/>
    性别: <input type="radio" name="gender" value="male" class="radio" checked="checked">男&emsp;
    <input type="radio" name="gender" value="female" class="radio">女<br/>
    爱好 <input type="checkbox" name="hobby" value="smoke">抽烟
    <input type="checkbox" name="hobby" value="drink" checked>喝酒
    <input type="checkbox" name="hobby" value="drink" checked>喝酒
    头像<input type="file" name="userPic"><br/>
    学历<select name="userEdu">
        <option value="0">请选择</option>
        <option value="1">入门</option>
        <option value="2" selected>精通</option>
        <option value="3">放弃</option>
</select><br/>
    简介<textarea name="userIntro" cols="30" rows="10">
    再次输入您的简介
</textarea><br/>
    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/>
    <input type="button" value="普通按钮">
</form>
</body>
</html>